/**
 * 用户个人资料
 */

'use strict';

import React, {Component} from 'react';
import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';

import {connect} from 'react-redux';
import {userActions} from '../../../../actions'

import {StackNavigator} from 'react-navigation';
import ToastUtil from '../../../../core/utils/toast-util.js';
import {Loading, EasyLoading} from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import CameraButton from '../../../../core/component/comp.button-camera';
import Color from '../../../../core/constant/color';
import Http from '../../../../core/utils/http';

import Util from '../../../../core/utils/util';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import ImageButton from "../../../../core/component/comp.image-button";
import PhotoInfoItem from "../../../../core/component-biz/comp.photo-info-panel";
import WinPanel from "../../../../core/component/comp.win-panel";
import WinPanelRow from "../../../../core/component/comp.win-panel-row";

import UserSkillItem from "../../../../core/component-biz/comp.user-skill-item";
import UserHeadIcon from "../../../../core/component-biz/comp.user-head-icon";

class UserDetailScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: navigation.state.params.title,
        headerTintColor: "white",
        tabBarVisible: false,
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {
            isShowWishMode: true,
        }
    }

    onSelectedModeChanged(selectedIndex) {
        this.setState({
            isShowWishMode: selectedIndex == 0,
        });
    }

    componentDidMount() {
        const {dispatch} = this.props;
        const {userId} = this.props.navigation.state.params;
        dispatch(userActions.getUserDetail(userId))
    }

    getUserDetailInfo() {
        const {userId} = this.props.navigation.state.params;
        const {userDetailMap} = this.props;
        let userInfo = null;
        if (userDetailMap.hasOwnProperty(userId)) {
            userInfo = userDetailMap[userId];
        }
        console.log('userInfo--->', userInfo)
        return userInfo
    }

    genButtonGroupUI() {
        return (
            <View style={styles.bottomButtonGroup}>
                <IconButton style={styles.btnItem} iconSource={require('../../../../img/icon_small_help.png')}
                            title="去帮忙"/>
                <IconButton style={styles.btnItem} iconSource={require('../../../../img/icon_small_love.png')}
                            title="27"/>
                <IconButton style={styles.btnItem} title="私聊"/>
            </View>
        );
    }

    genBigUserInfoPanelUI(userInfo, index) {
        return (
            <View key={`big-user-info-panel-${index}`} style={styles.bigUserInfoPanel}>
                <View style={styles.topUserInfoBar}>
                    <UserInfoBar headUrl={userInfo.headUrl} title={userInfo.nickName} subTitle={userInfo.city}
                                 rightTitle={userInfo.time}/>
                </View>
                <View style={styles.midUserImagePanel}>
                    {userInfo.hasOwnProperty('imageUrlList') &&
                    <Image style={styles.midUserImage} source={userInfo.imageUrlList[0]}/>}
                </View>
                <View style={styles.midUserDescriptionPanel}>
                    <Text style={styles.midUserDescription}>{userInfo.desc}</Text>
                </View>
                <View style={styles.bottomUserInfoPanel}>
                    <Text style={styles.userInfoText}>{userInfo.age}岁 | {userInfo.height}cm | {userInfo.weight}kg</Text>
                </View>
                {this.genButtonGroupUI()}
            </View>
        );
    }

    genUserInfoListUI() {
        const userList = [
            {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_01.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_01.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '刚刚',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_02.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_02.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_03.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_03.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_04.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_04.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },
        ];
        const userListUI = userList.map((userInfo, index) => {
            return this.genBigUserInfoPanelUI(userInfo, index)
        })
        return userListUI
    }

    genPeopleInfoListUI() {

        const userInfo = this.getUserDetailInfo()
        if(userInfo && userInfo.hasOwnProperty('xiangce') && userInfo.xiangce ){
            console.log( userInfo.xiangce ,"----->xiangce")
            let items = []
            userInfo.xiangce.split(',').map((picUrl)=>{
                items.push({
                    headUrl:{uri:Util.substrImageUrl(picUrl)}
                })
            })
            console.log(items,"-------->items--->")
            return (
                <GridView removeClippedSubviews={false} pageSize={5} initialListSize={5} groupStyle={styles.gridViewGrop}
                          items={items} itemsPerRow={3} renderItem={this.genPeopleInfoItemUI}/>
            )
        }
    }

    onPressPeopleInfoDetail(info) {
        const {navigate} = this.props.navigation;
        navigate('YuanwangDetail', {title: info.nickName, userInfo: info});
    }

    genPeopleInfoItemUI = (item, index) => {
        return (<PhotoInfoItem key={`people-info-item-${index}`} item={item}
                               onPress={this.onPressPeopleInfoDetail.bind(this, item)}/>)
    }


    genPhotoPanelUI() {
        return (
            <WinPanel title='相册' iconSource={require('../../../../img/icon_small_photo.png')}>
                {this.genPeopleInfoListUI()}
            </WinPanel>
        );
    }

    onPressJumpToAllWish = () => {
        Util.showToast("跳转到全部愿望")
    }

    genAllWishUI() {
        return (
            <WinPanel title='全部愿望' iconSource={require('../../../../img/icon_small_wish.png')}
                      onPressTitleBar={this.onPressJumpToAllWish}/>
        );
    }


    genUserDetailInfoPanelUI() {
        const userInfo = this.getUserDetailInfo()
        if(userInfo){
            return (
                <WinPanel title='详细信息' iconSource={require('../../../../img/icon_small_info.png')}>
                    {userInfo.csrq && <WinPanelRow title='生日' subTitle={`${userInfo.csrq}`} showSplit={true}/>}
                    {userInfo.shengao && <WinPanelRow title='身高' subTitle={`${userInfo.shengao}cm`} showSplit={true}/>}
                    {userInfo.tizhong && <WinPanelRow title='体重' subTitle={`${userInfo.tizhong}kg`} showSplit={true}/>}
                    {userInfo.xueli && <WinPanelRow title='学历' subTitle={`${userInfo.xueli}`} showSplit={true}/>}
                </WinPanel>
            );
        }

    }

    genUserLoveInfoPanelUI() {
        const {userInfo} = this.props.navigation.state.params;
        return (
            <WinPanel title='详细信息' iconSource={require('../../../../img/icon_small_info.png')}>
                <WinPanelRow title='运动' subTitle="瑜伽" showSplit={true}/>
                <WinPanelRow title='书籍' subTitle="宫心计" showSplit={true}/>
                <WinPanelRow title='电影' subTitle="动漫片" showSplit={true}/>
                <WinPanelRow title='音乐' subTitle="古典音乐" showSplit={false}/>
            </WinPanel>
        );
    }


    genCheckPassVideoUI() {
        const {userInfo} = this.props.navigation.state.params;
        if (userInfo.hasOwnProperty('passVideo') && userInfo.passVideo) {
            return (
                <IconButton style={styles.btnPassVideo} textStyle={styles.btnPassVideoText}
                            iconSource={require('../../../../img/icon_pass_video.png')} title="视频认证已通过"/>
            )
        }
    }

    genGenderUI() {
        const {userInfo} = this.props.navigation.state.params;
        const {gender} = userInfo
        if (gender) {
            const genderUrl = gender == "male" ? require('../../../../img/gender_boy.png') : require('../../../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }

    genUserDetailPanelUI() {
        const {userInfo} = this.getUserDetailInfo();
        if(userInfo){
            return (
                <View style={styles.userDetailPanel}>
                    <View style={styles.userDetailTop}>
                        <Text style={styles.userNickName}>{userInfo.nick_name}</Text>
                        <View style={styles.userGenderGroup}>
                            {this.genGenderUI()}
                            <Text style={styles.age}>{userInfo.age}</Text>
                        </View>

                        <View style={styles.rightActivePanel}>
                            <IconButton style={styles.btnActiveTime} textStyle={styles.btnActiveTimeText} title="活跃时间"/>
                        </View>
                    </View>
                    <View style={styles.splitLine}/>
                    <View style={styles.userDetailBottom}>
                        <Text style={styles.userDetailShortDesc}>{userInfo.description}</Text>
                    </View>
                </View>
            );
        }

    }

    genBigHeaderPanelUI() {
        const userInfo = this.getUserDetailInfo()
        if (userInfo) {
            return (
                <View style={styles.bigHeaderPanel}>
                    <Image style={styles.bigHeaderImage} source={{uri: Util.substrImageUrl(userInfo.touxiang)}}>
                        <ImageButton style={styles.playBtn} imageStyle={styles.playBtnImage}
                                     source={require('../../../../img/btn_small_play.png')}/>
                    </Image>
                    {this.genCheckPassVideoUI()}
                    {this.genUserDetailPanelUI()}
                </View>
            );
        }

    }


    genSkillListUI() {
        const userInfo = this.getUserDetailInfo()
        if (userInfo && userInfo.hasOwnProperty('skillList')) {
            const list = userInfo.skillList
            return (
                <WinPanel title='技能' iconSource={require('../../../../img/icon_small_photo.png')}>
                    {
                        list.map((item, index) => {
                            return (<UserSkillItem key={`user-skill-item-${index}`} item={item}
                                                   onPress={this.onPressJumpToSkillDetail.bind(this, item)}/>);
                        })
                    }
                </WinPanel>)
        }

    }


    onPressJumpToSkillDetail(skillInfo) {
        this.props.navigation.navigate('SkillDetailScene', {title: skillInfo.skill_name, skillInfo: skillInfo})
    }

    genDongTaiUI() {
        const userInfo = this.getUserDetailInfo()
        if (userInfo) {
            console.log(userInfo,"---->circle")
            const list = userInfo.circle
            return (
                <WinPanel title='动态' bodyStyle={styles.dongtaiPanelBody}
                          iconSource={require('../../../../img/icon_small_photo.png')}>
                    {
                        list.map((item, index) => {
                            return (<UserHeadIcon key={`user-dongtai-icon-${index}`} style={styles.dongtaiHeadIcon}
                                                  source={{uri: Util.substrImageUrl(item.pic_url)}}
                                                  onPress={this.onPressJumpToSkillDetail.bind(this, item)}/>);
                        })
                    }
                </WinPanel>)
        }

    }

    genBottomBtnGroupUI() {
        return (
            <View style={styles.bottomBar}>
                <IconButton style={styles.btnChart} textStyle={styles.btnChartText} title="聊天"/>
                <IconButton style={styles.btnOrder} title="下单" onPress={this.onPressOrder}/>
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {this.genBigHeaderPanelUI()}
                    {this.genSkillListUI()}
                    {this.genDongTaiUI()}
                    {this.genPhotoPanelUI()}
                    {this.genUserDetailInfoPanelUI()}
                </ScrollView>
                {this.genBottomBtnGroupUI()}
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EBEBEB',
    },
    scrollView: {},

    bigHeaderPanel: {},
    bigHeaderImage: {
        height: 255,
        resizeMode: 'cover',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnPassVideo: {
        backgroundColor: 'rgba(0,0,0,0.7)',
        width: 140,
        position: 'absolute',
        left: 8,
        top: 8,
        paddingLeft: 8,
        paddingRight: 8,
    },
    btnPassVideoIcon: {
        width: 22,
        height: 22,
    },
    btnPassVideoText: {
        color: '#0ABB07',
    },
    playBtn: {
        width: 65,
        height: 65,
    },
    playBtnImage: {
        width: 65,
        height: 65,
    },
    userDetailPanel: {
        backgroundColor: 'white',
    },
    userDetailTop: {
        padding: 8,
        flexDirection: 'row',
        alignItems: 'center',
        // borderWidth:1,
    },
    userNickName: {
        fontSize: 14,
    },
    userGenderGroup: {
        borderWidth: 1,
        borderColor: '#FF0055',
        height: 18,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        marginLeft: 8,

    },
    age: {
        color: '#FF0055',
        fontSize: 12,
    },
    genderIcon: {
        width: 12,
        height: 12,
    },
    rightActivePanel: {
        flex: 1,
        alignItems: 'flex-end',

    },
    btnActiveTime: {
        width: 78,
        height: 30,
        backgroundColor: '#FF0055',
    },
    btnActiveTimeText: {
        color: 'white',
    },
    splitLine: {
        height: Util.getRealPixel(1),
        backgroundColor: '#EDEDEF',
        marginLeft: 8,
    },
    userDetailBottom: {
        padding: 8,
    },
    userDetailShortDesc: {
        color: '#707070',
        fontSize: 14,
    },
    gridViewGrop: {
        justifyContent: 'space-between',
        padding: 4,
    },
    bigUserInfoPanel: {
        backgroundColor: 'white',
        marginBottom: 4,
    },
    dongtaiPanelBody: {
        flexDirection: 'row',
        padding: 8,
    },
    dongtaiHeadIcon: {
        marginRight: 10
    },
    bottomBar: {
        height: 54,
        borderTopWidth: Util.getRealPixel(1),
        borderTopColor: '#EDEDEF',
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',

    },
    btnChart: {
        width: 120,
        marginLeft: 8,
        marginRight: 8,
        height: 36,
        borderWidth: 1,
        borderColor: Color.BTN_BGCOLOR,
        backgroundColor: 'white',
    },
    btnChartText: {
        color: Color.TEXT_BTN,
    },
    btnOrder: {
        flex: 1,
        height: 36,
        marginRight: 8,
        borderWidth: 1,
        borderColor: Color.BTN_BGCOLOR,
        backgroundColor: Color.BTN_BGCOLOR,
    },
});


export default connect((state, props) => {
    console.log('--------->searchService', state)
    return ({
        userDetailMap: state.user.userDetailMap,
    });
})(UserDetailScene);